<template>
  <div id="app">
    <div style="width: 1200px; margin: 0 auto">
      <div style="display: flex; flex-items: center">
        <div style="width: 20%; margin-right: 20px">
          <el-input placeholder="请输入内容" v-model="keywords" clearable>
          </el-input>
        </div>
        <el-button type="primary" @click="btn">搜索</el-button>
      </div>

      <el-table :data="avatarData" style="width: 100%" height="600">
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <div>
              <img
                style="cursor: pointer; width: 50%"
                @click="goBack(scope.row)"
                :src="scope.row.steamAvacer.avatarfull"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="steamId"
          label="steamId"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="steamName"
          label="steam昵称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="charName"
          label="游戏昵称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="totalPlayTime"
          label="游戏总时长"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="lastLoginGlobal"
          label="最后上线时间"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="address" label="地址">
        </el-table-column>
        <el-table-column align="center" prop="admin" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="getPay(scope.row)"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="dataList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
      >
      </el-pagination>
    </div>
    <el-dialog title="充值中心" :visible.sync="dialogFormVisible">
      <div>
        <div>
          <img :src="itemData.steamAvacer.avatar" alt="" />
        </div>
      </div>

      <el-form :model="form">
        <el-form-item label="充值金额" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      dataList: "",
      avatarData: [
        {
          steamAvacer: {
            avatarfull: "",
          },
        },
      ],
      itemData: {
        steamAvacer: {
          avatar: "",
        },
      },
      keywords: "",
      current: 1,
      dialogFormVisible: true,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.btn();
  },
  methods: {
    getPay(value) {
      console.log(value);
      this.itemData = value;
      this.dialogFormVisible = true;
    },
    async btn() {
      await this.getData();
      await this.getInfo();
      await this.getIp();
      this.avatarData = this.dataList.list;
    },
    handleSizeChange(val) {
      this.current = val;
      this.btn();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.btn();
      console.log(`当前页: ${val}`);
    },
    goBack(value) {
      window.open(value.steamAvacer.profileurl);
    },
    getData() {
      return axios
        .post("https://iuwc.cn/un/getUnturnedList", {
          keywords: this.keywords,
          pageSize: "10",
          pageNum: this.current,
        })
        .then((response) => {
          this.dataList = response.data.data;
        });
    },
    getInfo() {
      this.dataList.list.forEach((item) => {
        return axios
          .post("https://iuwc.cn/un/steamAvatar", {
            steamId: item.steamId,
          })
          .then((response) => {
            this.$set(item, "steamAvacer", response.data);
          });
      });
    },
    getIp() {
      this.dataList.list.forEach((item) => {
        return axios
          .post("https://iuwc.cn/un/ipToHome", {
            ip: item.ip,
          })
          .then((response) => {
            this.$set(item, "address", response.data);
          });
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
